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RealONE Player RMP Authoring Kit 


INTRODUCTION 


Welcome to the RealONE Player RMP Authoring Kit! 


Overview 


The RealONE Player RMP Authoring Kit gives you the information you need 
to create Real Metadata Package (RMP) files and skins for RealONE Player. 
The RMP format has been developed to enhance the way people experience 
music, while at the same time giving content creators a better way to 
communicate with their customers. Skins are a form of functional digital art 
that you can use to communicate with millions of RealONE Player users. 


How This Manual Is Organized 


“Creating Real Metadata Package Files” on page 7 describes how to create 
RMP files and explains how to use the sample RMP included in this 
Authoring Kit. 


“Creating Skins for RealONE Player” on page 23 introduces skins, lists the 
contents of the Skins Tool Kit, and provides an overview of the skin creation 
process. 


“Creating a Skin: Tutorial” on page 27 is a tutorial on basic skin creation. 


“Skin Creation Advanced Topics” on page 37 presents advanced topics for skin 
creation. 


“Example Skin: Page Me” on page 51 shows the components of the Page Me 
example skin created by Ken Moore. 


“Sample Files Catalog” on page 55 displays the sample backgrounds and 
controls included in the Skins Tool Kit. 


Text Conventions in this Manual 


File and directory names appear in sans serif type. 
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User interface elements and combo-key commands such as Ctrl+Alt+L appear 


in bold type. 


Technical Support 


For general information about RealNetworks’ technical support, visit: 
http://service.real.com 


CHAPTER 


T 


CREATING REAL METADATA PACKAGE FILES 


This chapter describes how to create Real Metadata Package (RMP) 
files for use with RealONE Player. 


This authoring kit provides sample files you can use to create an RMP file. 
Comments in the sample files help you identify the locations where your 
customized information should go. A template helps make your first creations 
as easy as possible. 


Introduction 


The RMP format has been developed to add to the way people experience 
music while at the same time giving content creators a better way to 
communicate with their customers. RMP files are based on the open industry 
standard eXtensible Markup Language (XML), so they are straightforward to 
create and use. The RMP file format is evolving to support more functionality 
over time. 


The current RMP kit is available at http://www.realnetworks.com/devzone. 
This document describes functionality enhancements to the RMP for 
RealONE Player, including the following capabilities: 


- Add context info URLs to files being imported 


- Import streams into My Library and playlists, rather than downloading 


Tip: Be sure to register your name on the RMP content creation 
Web site at http://www.realnetworks.com/devzone/ 
howto/contentcreation/rmp/index.html for the latest 
developments. 


Add Context Info URLs 


Three new fields have been introduced to the RMP format to provide support 
for context info URLs. The expected behavior is that when the downloaded file 
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is played back in RealONE Player, the associated URL is displayed in the 
context window. . 


New Context Info Field Specification to make 
<CONTEXTINFO_URL> Set this to a URL to be stored in the track’s 
</CONTEXTINFO_URL> metadata as 

“Playback Specifications:Context Info URL”. 
<CONTEXTINFO_WIDTH> Set this to the desired width of the context 
</CONTEXTINFO_WIDTH> window. 
<CONTEXTINFO_HEIGHT> Set this to the desired height of the context 
</CONTEXTINFO_HEIGHT> window. 


The following sample demonstrates how to use the new context info fields in 
an RMP. 


<PACKAGE> 
<TITLE>regularfries_softcity_mp3</TITLE> 
<ACTION>download</ACTION> 
<TARGET>Real.com Downloads</TARGET> 
<EXP_DATE>06/28/2002 10:51</EXP_DATE> 
<PROVIDER> 
<AUTHOR>RealJukebox</AUTHOR> 
<NAME>RealNetworks</NAME> 
<URL>http://www.real.com</URL> 
<COPYRIGHT>Copyright 1999, RealNetworks</COPYRIGHT> 
<CONTACT>RealJukebox@real.com</CONTACT> 
</PROVIDER> 
<SERVER> 
<NAME>Downloads</NAME> 
<DESC>RealJukebox File Server</DESC> 
<NETNAME>205.158.58.128</NETNAME. 
<LOCATION>/realjukeboxsound/305a82594c6b18a7dc18/mp3/%f</LOCATION> <!-- 
%f = filename, %fid=Track id, %lid = TrackList ID, %pid= package id --> 
<KEY>Not used in Betal</KEY> 
</SERVER> 
<TRACKLIST> 
<LISTID>99</LISTID> 
<TRACK> 
<TRACKID>6907</TRACKID> 
<TITLE>Soft City</TITLE> 
<ALBUM>Blueprint For A Higher Civilisation</ALBUM> 
<ARTIST>Regular Fries</ARTIST> 
<GENRE>Unknown</GENRE> 
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<FILENAME>Regular Fries - Soft City.mp3</FILENAME> 
<SIZE>3563853</SIZE> 
<FORMAT>.mp3</FORMAT> 
<QUALITY>128000</QUALITY> 
<CHANNELS>2</CHANNELS> 
<DURATION>218</DURATION> 
<CONTEXTINFO_URL>http://www.yahoo.com/</CONTEXTINFO_URL> 
<CONTEXTINFO_WIDTH>300</CONTEXTINFO_WIDTH> 
<CONTEXTINFO_HEIGHT>200</CONTEXTINFO_HEIGHT> 
</TRACK> 
</TRACKLIST> 
<SIG>aa602425a652a7ef9c6ae09eb65f15af</SIG> 
</PACKAGE> 


Import Streams into My Library or Playlists 


A field has been introduced to the RMP format to provide support for 
importing streams into My Library and other playlists, rather than importing 
by downloading. The expected behavior is that the stream URL provided in 
the URL tag is added to My Library. 


New Stream Importing Field Specification to make 
<IS_STREAMING> Set this to “1” to indicate that this is a 
</IS_STREAMING> streaming URL that should simply be 


imported and not downloaded. 

Note: The <ACTION> tag must also be set to 
“import-copy” and the <URL> tag must 
contain the URL associated with the streaming 
content. The <FILENAME> tag is considered 
irrelevant in this situation. 


The following sample demonstrates how to use the new import streaming 
content field in an RMP. 


<PACKAGE> 
<TITLE>regularfries_softcity_mp3</TITLE> 
<ACTION>import-copy</ACTION> 
<TARGET>Real.com Downloads</TARGET> 
<EXP_DATE>06/28/2002 10:51</EXP_DATE> 
<PROVIDER> 
<AUTHOR>RealJukebox</AUTHOR> 
<NAME>RealNetworks</NAME> 
<URL>http://www.real.com</URL> 
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<COPYRIGHT=Copyright 1999, RealNetworks</COPYRIGHT> 
<CONTACT>RealJukebox@real.com</CONTACT> 
</PROVIDER> 
<SERVER> 
<NAME>Downloads</NAME> 
<DESC>RealJukebox File Server</DESC> 
<NETNAME>205.158.58.128</NETNAME. 
<LOCATION>/realjukeboxsound/305a82594c6b18a7dc18/mp3/%f</LOCATION> <!-- 
%f = filename, %fid=Track id, %lid = TrackList ID, %pid= package id --> 
<KEY>Not used in Betal</KEY> 
</SERVER> 
<TRACKLIST> 
<LISTID>99</LISTID> 
<TRACK> 
<TRACKID>6907</TRACKID> 
<TITLE>Soft City</TITLE> 
<ALBUM>Blueprint For A Higher Civilisation</ALBUM> 
<ARTIST>Regular Fries</ARTIST> 
<GENRE>Unknown</GENRE> 
<URL>http://relaguide.real.com/RGX/RG-us.(/movies/) 
-hline-1.txt.hl-20010730-1-1.RGX/ramhurl.film.com/smildemohurl.ram?file 
=channels/Lotr/find.smi</URL> 
<SIZE>3563853</SIZE> 
<FORMAT>.mp3</FORMAT> 
<QUALITY>128000</QUALITY> 
<CHANNELS>2</CHANNELS> 
<DURATION>218</DURATION> 
<IS_STREAMING>1</IS_STREAMING> 
</TRACK> 
</TRACKLIST> 
<SIG>aa602425a652a7ef9c6ae09eb65f15af</SIG> 
</PACKAGE> 


Add to the Music Experience 


Use RMPs to improve your customers’ music experience by incorporating 
other relevant content with your music downloads—content that can also help 
drive traffic back to your Web site. With a single link, you can add this kind of 
functionality: 


- Download multiple songs at once in a song pack. Songs can be encoded in 
RealAudio, MP3, LiquidAudio, AT&T's a2b, Mjuice, or Wave formats. 
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- Include custom RealONE Player faceplates, called skins, which are 
automatically installed. The skin can also contain a link to your Web site. 


- Attach a graphical banner or Music Info Panel (MIP) to a song, so that the 
banner is displayed when the song is selected. This MIP is a W3C standard 
Synchronized Multimedia Integration Language (SMIL)-based display 
and can contain images, formatted text, animation, and even video. The 
MIP can also contain a link to your Web site. 


- Automatically load the songs into RealONE Player on your customer’s 
computer, create a playlist to contain them, and begin playback. 


Improved User Experience 


RMPs enhance the convenience and fun of having content downloaded with 
music. They also allow users to: 


- See information about a song while it is being downloaded 


- Easily identify and restart failed music downloads. 


RealONE Player Download Manager Dialog 


‘79% Complete - ReaWJukebox Downloads 


dip Angola Downloaded 
] E-Mail Female 79.2% (2.39 of 3.02 MB) 
dp Hi-Fi Skin Pending (0.02 MB) 


Details 


Mickey Hart - Planet Drum 


Album : Supralingua 

Title : Angola 

Genre: Misc 

PlayList : RMPDemo _Playlist 

Publisher : RealNetworks 

File Name : MickeyHart_PlanetDrum_Angola.rmj >| 


Downloading 2 files 79.8% (2.39 of 3.04 MB) 
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When a visitor to your site clicks on an RMP link, RealONE Player is 
automatically launched, and the download manager also appears. Users can 
select specific tracks to download, if they choose. The download process 
begins automatically. 


When the user selects or plays the track from the RealONE Player Music 
Library, the MIP is displayed. 


Increased Content Provider Control 


When content providers set up music for customer access on the Internet, they 
can configure RMPs that refer to a variety of locations on servers. The 
customer clicks only one Web link, but the music and other content files can 
come from more than one location. The content provider also has control over 
the music files’ metadata, such as copyright information. 


The ability to create custom MIPs and skins offers content providers great 
potential for building brand and traffic. The RealONE Player user interface 
(UI) displays the MIP whenever the music file is selected. Skins are also an 
excellent branding opportunity. 


For More Information: For more information on creating skins, 
see “Creating Skins for RealONE Player” on page 23. 


Components of rmp_toolkit.exe 


The rmp_toolkit.exe file is available from the RMP development section on 
http://www.real.com. The following table lists the files contained in the 
rmp_toolkit.exe file. 


Contents of rmp_toolkit.exe 


Folder name File name Description 
rmp_toolkit (final name of pdf | Adobe Acrobat version 

file of this doc) 

Rj_rmp.gif A logo you can use on your site 
to highlight your RMPs, as 
shown here: 

Si 
Sample RMP Rmp_demo.rmp | Sample RMP file 
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Contents of rmp_toolkit.exe (continued) 


Folder name File name Description 
Sample.rjm Contains metadata about a 
sample SMIL presentation 
Sample1.smi Sample SMIL presentation 
Sampletext.rt Sample realtext used in SMIL 
presentation 


Sampleanim.gif Sample graphic used in SMIL 
presentation 


Samplelogo.gif Sample graphic used in SMIL 


presentation 
Sample Skin (Page | Page me.zip Sample skin 
Me) 
Creating RMP Files 


Here’s a quick summary of the steps for creating a valid RMP file. 

1. Encode your music files. 

2. Import your music into RealONE Player. 

3. Create a valid .rmp file. 
a. Write metadata for your music files by editing track properties. 
b. Create a playlist. 
c. Export the playlist to .rmp format. 
d. Using Notepad, customize the tags in you new .rmp file. 


4. Post your content and create a link on your Web page so your customers 
can download your new creation! 


The following sections describe the process in more detail. 


Step 1: Encode Music Files 


You can use RealONE Player or any other program capable of encoding music, 
from CDs or any other source, into any of the following formats: 


- RealAudio 
- MP3 
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+ LiquidAudio 
- a2b 


If you use a format that contains an expiration date, such as LiquidAudio, 
RealONE Player supports this behavior. The LiquidAudio renderer itself 
displays a message saying that the track the user is trying to play has expired. 
Because users can view the MIP content even on expired tracks, they can 
return to the original site to get new tracks, if available. 


Step 2: Import Music into RealONE Player 


You must import your encoded music files into RealONE Player. Use the 
Import Files item on the Open menu, or drag from the Desktop onto 
RealONE Player. Imported tracks are displayed in the All Tracks section of the 
Music Library. 


Step 3: Create a Valid .rmp File 
Several steps are required to create a valid .rmp file: 
1. Write metadata for music files. 
2. Create a playlist. 
3. Export the playlist in .rmp format. 


4, Use Notepad to customize the playlist. 


Step 3a: Write Metadata for Music Files 


If there is no metadata, such as track name, artist, or album, associated with 
the music files you imported into RealONE Player, you can add that 
information now. You can also edit existing information at this time. 


If you use RealJukebox Plus, follow these steps. 
> To edit track properties 


1. Right-click on the track and choose Properties. 


2. Edit the metadata, and then choose OK to write the new metadata into 
the music files themselves. 


Tip: If you have several tracks with the same properties, you 
can multiselect the tracks, right-click, and edit the entire 
selection with one dialog. 
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If you use a free copy of RealONE Player, follow these steps. 
> To edit track properties 


1. Select the track and press F2, or right-click on the track and select 
Rename Track. 


2. Use the Tab key to move through and edit the information categories 
associated with the track. 


Step 3b: Create a Playlist 


You must create a playlist that contains only the tracks that you want to 


package. 
> To create a playlist 


1. Select from the list in the right window pane all the tracks you want to 
include. 


2. Click on one of the selected tracks (while holding the mouse button 
down) to drag the tracks as a group and drop them onto the Playlists node 
in the left window pane. 


3. Type my_playlist in the playlist name field of the dialog, and then choose 
OK. 


Tip: You can give the playlist any name, but for this example, 
you should use the suggested name. 


Step 3c: Export a Playlist 


> To export a playlist 
1. Locate the playlist named my_playlist under the Playlists node. 
2. Right-click on the playlist’s icon and choose Export from the menu. 


3. Save the exported file to your Desktop as my_playlist.rmp. 


Step 3d: Customize a Playlist 


The best way to customize your first playlist is to open two instances of 
Notepad, so you can look at the sample playlist file, sample.rmp, while you 
make changes to the my_playlist file. Sample.rmp shows what my_playlist.rmp 
should look like after you have made changes. 
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> To customize a playlist 


1. Choose Programs from the windows Start menu, then choose Accessories, 
and then choose Notepad. Do this twice. 


2. Open my_playlist.rmp in one instance of Notepad, and set the window up 
as a column taking up half of your screen. 


3. Open sample.rmp in the other instance of Notepad, and set the window up 
as a column taking up half of your screen. 


4. Use the information in the table below to make changes. In 
my_playlist.rmp, locate the information listed in the left column of the 
table, and change it as shown in the right column of the table. Refer to 


sample.rmp if necessary. 


Changes for my_playlist.rmp 


Item to change in my_playlist.rmp 
<ACTION>import</ACTION> 


Change to make 
Change to <ACTION>download</ACTION> 


<TARGET>my_playlist</TARGET> 


Rename to the playlist that you want to create 
on the user’s machine, for example, Cool New 
Hits 


<AUTHOR>RealONE 
Player</AUTHOR> 


This is typically the artist name. 


<NAME>RealNetworks</NAME> 


This is typically the record company name. 


<URL> http://www.real.com</URL> 


Replace this URL with the URL that provides 
access to this music. 


<COPYRIGHT> Copyright 1999, 
RealNetworks</COPYRIGHT> 


Typically a record company copyright. 


<CONTACT>RealONE An e-mail address for the user to contact in 
Player@real.com</CONTACT> case of download trouble. 
<NAME>LocalOnly</NAME> Optional. Rename with the name of the server, 


such as Jazz Center. 


<DESC> Local File server</DESC> 


Optional. Describe the server, such as Your 
Center for Jazz. 


<NETNAME?>local</NETNAME> 


Change to, for example, 
<NETNAME> docs.real.com</NETNAME> 
Basically, the main portion of the URL for 
where the tracks will exist, minus the http:// 
that is typically placed in a browser URL. 

(Table Page 1 of 3) 
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Changes for my_playlist.rmp (continued) 


Item to change in my_playlist.rmp 
<LOCATION>%f</LOCATION> 


Change to make 


Change to the remainder of the path to the 
music tracks on the server. For example, 
include 

<LOCATION> /docs/rmpdemo/%f</LOCATIO 
N> for tracks that exist on 
hetp://docs.real.com/docs/rmpdemo/. 

The %f tells RealONE Player to look in the 
tracklist for the exact filename that exists on 
the server. 


This is the tracklist area. If you 
intend to use the MIP features, find 
the following items: 


If you intend to use the MIP features, insert the 
URL line in between the track ID and the title, 
as shown. 


<TRACK> <TRACK> 
<TRACKID>Some <TRACKID>Some number</TRACKID> 
number</TRACKID> <URL> http://docs.real.com/docs/rmpdemo/mbart. 
<TITLE> Back Up Against the zip</URL> 
Wall</TITLE> <TITLE>Angola</TITLE> 
Skip this step if you do not plan to use MIP 
with these tracks. 
<ALBUM> For each track that you include in your RMP, 
<ARTIST> add the correct information for these tags. See 
<GENRE> Sample.rmp for complete information. 


(Table Page 2 of 3) 
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Changes for my_playlist.rmp (continued) 


Item to change in my_playlist.rmp 
<FILENAME> 


Change to make 


This is the location referred to by the %f from 
the location tag above. This filename is both 
the filename on the server as well as the 
destination filename for the user’s hard drive. 
This example shows track1.mp3. RealONE 
Player will always create track1(2).mp3 on the 
user’s hard drive if necessary. However, other 
users may be used to a naming convention that 
specifies Artist Name--Album Name-- 
Title.mp3. You can choose which format to 
use. 

Repeat album, artist, genre, and filename for 
each track. Leave other fields (for example, 
size) alone, because they should already be 


correct. 


At the bottom of my_playlist.rmp, 
look for the following tags: 
</TRACKLIST> 

</PACKAGE> 


Add the following line between the two tags: 
</TRACKLIST> 
<SIG>3a6-4ilm2-3xv</SIG> 
</PACKAGE> 
(Table Page 3 of 3) 


To include a skin in your RMP, treat it as you would a music track. Use the 
relevant .rjs file in place of a music file. The RealONE Player download 
manager is smart enough to figure out what to do with each file type. 


Step 4: Post an RMP File toYourWeb Site 


Include a rmp file in your Web site the same way you include other files. For 
example, to post the Sample.rmp file, insert a line such as: 


<A HREF="http://docs.real.com/docs/rmpdemo/rmpdemo”>RMPDemo</A> 


Edit your existing Web page, or create a new one, to link to your new .rmp file. 


Creating MIP Content 


In the .rmp file you just created, each track is configured to look for a .zip file 
at a certain URL. In sample.rmp, the name of the first .zip file was mhart.zip. 
Now it’s time to create the .zip file with all the necessary components. You 


need the following tools: 
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- Graphic program (use MS Paint, in Start->Programs->Accessories) or 
Paint Shop Pro (http://www.jasc.com) 


- Notepad 
» RealONE Player 
- The templates that accompany this document 
- WinZip (http://www.winzip.com) 
The templates show a basic SMIL presentation. Any SMIL presentation that 


uses the correct dimensions, 530x352, will work. 


For More Information: For information on producing a SMIL 
file for your content, visit the devzone section of 
http://www.realnetworks.com. 


Basically, the steps to create MIP content are: 
1. Create a .rjm file that contains the name of the .smi file. 
2. Replace the sample animation. 
3. Replace the sample text. 
4, Include your URL in the text. 
5. Replace the sample logo. 
6. Edit the .smi file if you have changed the filenames of the components. 


7. Zip all elements together, and be sure that the name of the .zip file 

matches the name you specified in the track list area in the .rmp file. 

The following sample files are provided so you can change the SMIL content. 

+ Sampleanim.gif 

This basic animation is 52x52 square. You can include any animation you 
like. The number of frames does not matter. The frames are automation 
with your own, rename your new animation the same name as the one 
from the template, and replace the template file. (You may want to save a 
copy of the template file somewhere else for future reference.)To view 
your new animation in action in RealONE Player, double-click on the 
samplel.smi file. 


« Sampletext.rt 


Open this file in Notepad. This text is optimized for the space available, so 
you can replace it with your own text of approximately the same length. 
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Note that some of the text has a hyperlink. You can replace the sample 
hyperlink with your own. 

« Samplelogo. gif 
This sample logo is 131 pixels wide by 53 pixels high. Use your paint 
software program to reduce your company’s logo to a size that fits here. 
The best way to guarantee that your size matches is to erase the sample 
logo from the samplelogo.gif file, leaving the white background. Then, 
paste your new logo onto the existing white rectangle and save. (You may 
want to save a copy of samplelogo.gif for future reference.) 


The Sample MIP 


! , They Might Be Giants’ new MP3-only album, Long « 
. | Tall Weekend, is now available! Learn more about f Mm iJ S | C 


ithe album at EMusic.com. 


> To modify the template 
1. Open the sample.rjm file in Notepad. 


2. Change the tag that says <CLM>sample1.smi</CLM> to the name of the 
SMIL file that you are making. For this demonstration, you can retain the 
samplel.smi name. 


3. Customize the components of the SMIL presentation to fit your content. 


4, Advanced: Edit the sample1.smi file directly. This step is not required, but 
you might want to try it. 


a. Open the sample1.smi file in Notepad. Note that the subfiles described 
above are mentioned by name. 


b. If you changed the names of the subfiles themselves, you must change 
those names in this file. For example, if you changed samplelogo.gif to 
acmelogo.gif, you must change the mention of samplelogo.gif in this 


file. 
c. Save and close the .smi file. 


d. Double-click on the .smi file from Windows so you can verify that it 
plays back in the RealONE Player as expected. 


5. Create a .zip file containing all of the elements you created in this section, 
including the .rjm file, the .smi file, and all supporting content for the 
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.smi file. Be sure to call it the name you specified in the tracklist area of 


the .rmp file. 


For More Information: For help creating .zip files, refer to the 
WinZip documentation. 


Printout of RAPDemo.rmp 
<PACKAGE> 


<TITLE>RMPDemo</TITLE> 
<ACTION>download</ACTION> 
<TARGET>RMPDemo _Playlist</TARGET> 
<EXP_DATE>08/06/2000 15:00</EXP_DATE> 
<PROVIDER> 
<AUTHOR>RealONE Player</AUTHOR> 
<NAME>RealNetworks</NAME> 
<URL>http://www.real.com</URL> 
<COPYRIGHT=Copyright 1999, RealNetworks</COPYRIGHT> 
<CONTACT>RealONE Player@real.com</CONTACT> 
</PROVIDER> 
<SERVER> 
<NAME>Sample Downloadable Music</NAME> 
<DESC=This is where the downloads are</DESC> 
<NETNAME>docs.real.com</NETNAME> 


<LOCATION>/docs/rmpdemo/%f</LOCATION> <!-- %f = filename, %fid=Track 


%lid = TrackList ID, %pid= package id --> 
<KEY>Not used</KEY> 
</SERVER> 
<TRACKLIST> 
<LISTID>3</LISTID> 
<TRACK> 
<TRACKID>MickeyHart_PlanetDrum_Angola.rmj</TRACKID> 
<URL=http://docs.real.com/docs/rmpdemo/mhart.zip</URL> 
<TITLE>Angola</TITLE> 
<ALBUM>Supralingua</ALBUM> 
<ARTIST>Mickey Hart - Planet Drum</ARTIST> 
<GENRE>Misc</GENRE> 
<FILENAME>MickeyHart_PlanetDrum_Angola.rmj</FILENAME> 
<SIZE>3581374</SIZE> 
<FORMAT>.rmj</FORMAT> 
<QUALITY>96695</QUALITY> 
<CHANNELS>2</CHANNELS> 
<DURATION>294</DURATION> 
</TRACK> 


21 


RealONE Player RMP Authoring Kit 


<TRACK> 
<TRACKID>GarretSwayne_FirstGlance_E-MailFemale.mp3</TRACKID> 
<URL=http://docs.real.com/docs/rmpdemo/gswayne.zip</URL> 
<TITLE>E-Mail Female</TITLE> 
<ALBUM>First Glance</ALBUM> 
<ARTIST>Garret Swayne</ARTIST> 
<GENRE>Country</GENRE> 
<FILENAME>GarretSwayne_FirstGlance_E-MailFemale.mp3</FILENAME> 
<SIZE>3169911</SIZE> 
<FORMAT>.mp3</FORMAT> 
<QUALITY>128000</QUALITY> 
<CHANNELS>2</CHANNELS> 
<DURATION>198</DURATION> 

</TRACK> 

<TRACK> 
<TRACKID>hi-fi.rjs</TRACKID> 
<TITLE>Hi-Fi Skin</TITLE> 
<ALBUM></ALBUM> 
<ARTIST></ARTIST> 
<GENRE></GENRE> 
<FILENAME>hifi.rjs</FILENAME> 
<SIZE>17364</SIZE> 
<FORMAT></FORMAT> 
<QUALITY></QUALITY> 
<CHANNELS></CHANNELS> 
<DURATION></DURATION> 

</TRACK> 

</TRACKLIST> 
<SIG>3a6-4ilm2-3xv</SIG> 
</PACKAGE> 
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CREATING SKINS FOR REALONE PLAYER 


The RealONE Player Skins Toolkit provides everything you need to 
create your first RealONE Player skin. This chapter explains what a 
skin is, describes the contents of the Skins Toolkit, and outlines the 
basic process of skin creation. 


What Is a Skin? 


Skins are a form of functional digital art that you can use to communicate 
with millions of RealONE Player users. You can use skins for many reasons: 
just for fun, to showcase your artistic talent, or to promote a product, service, 
or Web site. Skins can be downloaded, automatically installed into RealONE 
Player, and, with user permission, set as the default skin. But skins can do 
more than just look great and act as a control panel for RealONE Player—they 
can also contain Web links so users can click through to your Web site. 


Skins allow RealONE Player users to change the look and feel of RealONE 
Player. Each skin contains RealONE Player buttons and controls, such as Play, 
Record, and Volume, and can also include status information and custom 
controls. RealONE Player users can download new skins from RealJukebox 
Central and use them instead of the standard RealONE Player interface. 


Each RealONE Player skin is composed of several graphics files and a text file 
called skin.ini. Each element of the skin, such as the background and the Play 
button, must be created as a separate bitmap graphic, for example, 
backgnd.bmp and play.bmp. The skin.ini file dictates how the graphics fit 
together, based on you specifications for which buttons and elements to 
display, and where they go. To create the skin file itself, combine the .bmp files 
and the skin.ini file ina single .zip file, rename the file with an .rjs extension, 
and your skin is ready to go! 
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Contents of the RealONE Player Skins Tool Kit 
The tool kit you downloaded includes the following files: 


Files in the Skins Tool kit 


Name Description 

(need final name of file) This manual 

Sample Files folder, which 

contains: 

Sample Backgrounds folder | 4 sample backgrounds 

Sample Controls folder 5 sets of controls 

skin.ini Text file 

Example Skin folder PageMe.zip, which contains the 
skin.ini file and custom controls for 
Ken Moore’s PageMe skin. 


Skin Creation Basics 


This section outlines the process for creating a skin. 


Create Graphic Elements 


Use any graphics program to design the background, each button, each slider, 
and button states for each button. Keep each graphic element in a separate 
bitmap (.bmp) file. 


Package the Skin 


Use a zip program such as WinZip (http://www.winzip.com) to package the 
files for a skin. The extension for a skin file can be either .zip or .rjs. RealONE 
Player automatically imports files with the .rjs extension, which simplifies 
downloading. 


Test the Skin 


Place the .rjs file into the folder you are using to store skins. Typically, this is 
the C:\Program Files\Real\RealONE Player\skins folder. 


You can replace the skin that is currently running, and then use the right-click 
menu to access the same skin again. The updated skin, based on the new file, 


will be displayed. 
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Anatomy of a Skin 


When you create a skin, you replace native graphics (that is, the existing 
RealONE Player buttons, backgrounds, and sliders) with new graphics that 
you create. A completed skin consists of a text file and one or several graphics 
files compressed into a single .zip file that RealONE Player can import and 
use. The graphics files are the background and controls that make up your 
skin, and the text file, called skin.ini, is the programming instructions that tell 
RealONE Player how to put it all togther. 


The skin. ini file 


You can edit the skin.ini file in any text editor, such as Notepad or WordPad, or 
word processing program, such as Microsoft Word or WordPerfect. This file 
contains a series of commands that RealONE Player uses to assemble and 


display a skin. 


For More Information: The skin.ini file for Ken Moore’s Page Me 
skin is shown in “Example Skin: Page Me” on page 51. Not all 
skin.ini files are this complex, but this is a good example of the 
many possibilities for skin creation. 


Background 


The background is the basic image that creates a theme for your skin, and is 
the surface on which all your controls are placed. Backgrounds are bitmap 
images (.bmp files). This tool kit contains several sample background files you 
can use when you build a skin by using the tutorial in “Creating a Skin: 
Tutorial” on page 27. You can also create your own background, using any 
graphics program, or use an existing image. Your final background file must 
be named backgnd.bmp. 


For More Information: See “Sample Files Catalog” on page 55 for 
the sample backgrounds included in this tool kit. 


Controls 


Controls are the buttons and sliders that make RealONE Player work. You can 
choose to show or hide any of these controls. You can use the standard 
RealONE Player controls, or use a graphics program to create new controls. 
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Use the sample controls provided in this tool kit when you step through the 
tutorial. 


You can also use RealONE Player’s existing controls. In fact, if you specify in 
the skin.ini file that the Play button should appear (PlayShow=1) but you do 
not include your own Play button graphic, called play.bmp, your skin uses the 
native Play button instead. 


Each button bitmap has four states: disabled, normal, mouse-over, and 
working. 

Types of Controls 
Control Description 


Standard buttons Basic RealONE Player buttons: Play, 
Record, Pause, Stop, Previous Track, 
Next Track, etc. 


Sliders Two types of sliding controls: the seek 
or progress bar, and the volume 
control slider. Sliders have two parts: 
the track, or background, and the 
thumb, which is the control that 
moves along the track. 


Custom controls Special buttons you create, usually to 
take the user to a specific URL or to 
change skins. 


Status fields For displaying information about the 
track that is currently playing, 
including artist, song title, and 
running time. 
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CREATING A SKIN: TUTORIAL 


This chapter provides step-by-step instructions for creating a simple 
skin using the sample files included with the tool kit. If you prefer 
to create a skin from scratch by creating your own graphics, see 
“Skin Creation Advanced Topics” on page 37. You should complete 
the steps in this section before attempting to create a skin from 
scratch. 


Tools for Skin Creation 
To create a RealONE Player skin, you need the following tools. 


Editing program A text editor or word processing 
program such as Notepad, WordPad, 
Microsoft Word, or WordPerfect 


Graphics program Any graphics creation tool, such as MS 
Paint, PaintShop Pro, Adobe 
Photoshop 

Compression tool Any tool capable of compressing files 
into .zip format, such as Netzip 
(http://www.netzip.com) 

Sample files Included with this tool kit. 

Getting Started 


Prepare for creating your first skin by following these steps. 


> To prepare for skin creation 


1. Create a folder for your skin and name it My Skin. Save it in a location 
that’s easy to find, such as the Desktop. 


2. Open the Skins Tool Kit folder on your hard drive, and then open the 
Sample Files folder. 
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3. Copy the skin.ini file into your My Skin folder. 


Choose Graphics 


The first step in creating a skin is to choose the background and control set 
you want to use. For this tutorial, you can select from the sample files catalog. 
These files are zipped with the skin.ini file in the final packaging phase. 


Choose a Background 
It’s a good idea to choose a background first, because it defines the character 
of your skin. 
> To choose a background 
1. Open the Skins Tool Kit folder on your hard drive, and then open the 
Sample Files folder. 
2. Open the Backgrounds folder. 


3. Choose a background file (for example, backgnd1.bmp, backgnd2.bmp) and 
copy it from the Backgrounds folder into the My Skin folder. 


4, Rename the file to remove the number from the file name. For example, 
backgnd1.bmp becomes backgnd.bmp. Be sure to use the correct file names. 
It is important to use the correct file names for each file in your skin 
(skin.ini, backgnd.bmp, play.bmp, etc.). RealONE Player reads these file 
names when assembling your skin, and will recognize only the correct file 
names. If any of your file names are incorrect, your skin will not work 
properly. 


For More Information: For a list of correct file names for each 
control, see the “Standard Skin Controls” table on page 40. 


Choose Controls 


You do not have to use every button and slider that is provided. Look at your 
background file and decide which buttons and sliders you want to use, and 
where you want to place them on the background. 


Note: If you choose to use the standard RealONE Player 
controls, skip the steps below. RealONE Player automatically 


28 


CHAPTER 3: Creating a Skin: Tutorial 


displays the standard controls if you do not include any 
control graphics in your .zip file. 


> To choose controls 


1. Open the Skins Tool Kit folder on your hard drive, and then open the 
Sample Files folder. 


2. Open the folder for the control set you want to use. 


Tip: You can use graphics from more than one control set by 
following Steps 2 through 4 for each control you want to use. 


3. Choose control graphics (for example, play1.bmp, record2.bmp, and 
backgnd3.bmp) from the control set folder into the My Skin folder. 


4, Rename the .bmp files to omit the number from the file name. For 
example, play1.bmp becomes play.bmp. Be sure to use the correct file 
names. 


Determine Control Positions 


After you choose the controls you want to display on your skin, you must 
decide where they should appear on your background. There are two steps to 
this process: 


1. Use a graphics program to position the controls on a copy of your 
background graphic, and record the X,Y coordinates of each control. 


This is the measurement that tells RealONE Player where the control 
should be placed on your skin. X is the position of the control on the 
horizontal plane. Y is the position of the control on the vertical plane. 
Using the rulers or X,Y coordinates readings in the graphics program, you 
should be able to determine the X,Y coordinates for each of your controls. 


2. Type the X,Y coordinates into the skin.ini file. 


This section explains how to position the control graphics and determine the 
coordinates for each control. The following section, “Edit the skin.ini File” on 
page 31,explains how to enter the coordinates in the skin.ini file. 
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Create a Mock-Up 


Use the background and controls you selected from the sample files to create a 
mock-up of the final skin layout. Use a graphics program to place controls on 
the background and then determine the X,Y coordinates of each control. 


Note: The steps below assume that you have followed the 
instructions in this tutorial up until now. 


> To create a mock-up 


1. Use a graphics program to open the background file My 
Skin\backgnd.bmp). 


2. Save the background file under a new name: mock.bmp. 
3. Opena control graphic file. Do not save this file after editing. 


4. Using the Select tool, select one object (one copy of the control) from your 
control graphic, and use the Copy command to copy it. 


5. Use the Paste command to paste your control onto your background 
(mock.bmp) image in the desired position. 


Tip: Use layers for best results. Some graphics programs allow 
you to use multiple layers when creating an image. For the 
purposes of skin creation, making a new layer will let you move 
your controls around without affecting your background 
image (for example, if you decide to move a button after you 
have pasted it on the background, you may leave an empty 
space behind). It is not necessary to use layers, but it does make 
the process easier. 


6. Repeat steps 3 to S to place the other controls on the mock-up. 


Your sample mock-up might look something like this. 


Sample Mock-Up 


The magenta areas are transparent in the final skin. 


After you have positioned the controls on the background, you must 
determine the X,Y coordinates so RealONE Player can position the controls 
correctly on the final skin. 
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Determine X,Y Coordinates 


The X,Y coordinates are the numbers a graphics program uses to pinpoint the 
location of a control within your image. X,Y coordinates are similar to latitude 
and longitude on a map, because they describe the position of an item relative 
to the horizontal (X) and vertical (Y) planes. 


> To determine X,Y coordinates 


1. Place the cursor on the upper-left corner of a control in your mock-up. 


2. Find the X,Y coordinates readings in a graphics program, and write them 
down, along with the name of the control, for example, Play 24,78. 


3. Repeat this process to find coordinates for each button and slider control 
on your mock-up. When you are finished, you should have a list that 
resembles this one: 


Play 24,78 
Record 30,47 
Pause 64,90 
Stop 243,103 


Tip: Keep your numbers handy, because you'll soon be entering 
this information in the skin.ini file. 


Edit the skin.ini File 


The skin. ini file is a text file that contains the programming code used by 
RealONE Player to assemble your skin. By editing the text in the skin.ini file 
included in the Skins Tool Kit, you can determine which controls appear on 
your skin, and under what conditions. All of the basic commands are 
included, and with some minor changes, you can make your skin behave the 
way you want it to. The skin.ini file is zipped with your graphics files to create 


the final skin package. 


Note: You can place comments inside the skin.ini file, for 
example, your Web site address, e-mail, or information for 
other skin creators who look at your file. Be sure to begin each 
comment line with a semicolon (;). 
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Showing Controls 


The Control Show Properties section of the skin.ini file controls the showing 
and hiding of controls. 


To show or hide a control, add the Show command to a control name, and 
then add an equal sign (=) and either a zero (0) or a one (1). For the purpose of 
skin creation, 0 means no and 1 means yes. For example, the following 
command tells RealONE Player to show the Play button. 


PlayShow=1 


The following command tells RealONE Player not to show the Record button. 
RecordShow=0 


Tip: Think of the first part of the command as a question 
(“Should I show the Record button?”) and the second part as 
the answer (“No.”). 


For each command you want to appear on your skin, edit the appropriate line 


in skin.ini to specify a 1 at the end. For each control you want to hide, specify a 
0. 


Note: Remember, if you indicate that a control should be 
displayed, but do not include your own graphic for that 
control (with the correct filename), RealONE Player 
substitutes its standard control graphic when your skin is 
displayed. To use RealONE Player standard controls, you must 
specify X,Y coordinates for each control. 


Positioning Controls 


To position buttons and sliders, edit the Control Positions section of the 
skin.ini file. This is where you insert the X,Y coordinates you recorded when 
you created your skin mock-up. 


> To position a control 
1. Edit the appropriate line in the skin.ini file to read as follows: 
<controlname>TopLeft=<x,y> 
For example, 


PlayTopLeft=240,43 //positions the Play button at X,Y=240,43 
VolTopLeft=40,99 //positions the Volume slider at X,Y = 40,98 
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2. Enter coordinates for each control. 


3. Save the skin.ini file when you are finished. 


Specifying Conditional Settings 
Use the Control Show Properties section of the skin.ini file to specify that 
controls are to be shown only under certain conditions. 
The following command shows the Pause button only when a track is playing: 


PauseShow=Playing 


Control Conditions 


Condition Shows control when... 

NotPlaying a track is not playing. 

Paused playback is paused. 

NotPaused playback is not paused. 

Recording RealONE Player is recording from 
CD. 

NotRecording RealONE Player is not recording 
from CD. 

CDReady a CD is in the drive. 

NotCDReady no CD is in the drive. 

Package Your Skin 


To package your skin, use a compression program such as Netzip 
(http://www.netzip.com) to combine all the files that make up your skin 
into one compact .zip file. You should include the following files: 


« The edited skin.ini file 
- A background file (backgnd.bmp) 
- Bitmap files for each control (for example, play.bmp) 


If you followed the instructions in this tutorial, these files should all be in the 
My Skin folder. 


> To create a zip file (using Netzip) 


1. Select all the files in the My Skin folder. 
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2. Right-click the selected files. A quick menu appears. 
3. Select Zip in Place from the menu. 


4. Type a name for your skin, with either a .zip or .rjs extension. 
The extension of a skin file can be .zip or .rjs. Either will work if placed in 
the Real/RealONE Player/Skins folder, but files with a .rjs extension can be 
more easily imported into RealONE Player, either by downloading from 
the Internet, or by dragging and dropping the file onto RealONE Player. 


Tip: To change a.zip file extension to .rjs, locate the file in 
Windows Explorer, click the file and press F2, then type the 
new extension. 


For More Information: For help or more information on creating 
a zip file, see the documentation for your zip program. For 
help with Netzip, see Netzip Help. 


Test Your Skin 


After you have created and packaged your skin, you can test it by importing it 
into RealONE Player. 


Note: Be sure you have packaged you skin according to the 
instructions in “Package Your Skin” on page 33. 


> To test askin 


1. Place the zipped skin file into your RealONE Player skins folder. The 
default skins folder is located at C:\Program Files\Real\RealONE 
Player\skins. 


Tip: If RealONE Player is open and you are replacing the 
currently running skin, press Ctrl+Alt+L to update the skin and 
view your latest draft. 


2. To view your skin in RealONE Player from full mode, open the View menu 
and select Skins, and then select your skin from the list. 


3. To view your skin from skin mode, right-click your skin, choose Skins 
from the menu, and select your skin from the list. 


Now that you’ve seen your skin in action, you might decide to make some 
changes. For example, you can edit the bitmaps or change settings in the 
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skin.ini file. Then, zip the files again and copy the new zip file into the 
RealONE Player skins folder. 


For More Information: For detailed assistance with creating your 
own skin, see “Skin Creation Advanced Topics” on page 37. 
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CHAPTER 
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SKIN CREATION ADVANCED TOPICS 


This chapter contains information that helps you create a skin from 
scratch. After you have created a skin by following the steps in 
“Creating a Skin: Tutorial” on page 27, you can use the information 
in this chapter to create your own skins. 


Skin Design Considerations 


Buttons 


The skins you create will replace the existing native buttons, backgrounds, and 
sliders with your new graphics. This happens dynamically, based on the 
presence of a corresponding new graphic in the .rjs file. For example, if you 
specify in the skin.ini file that the Play button is supposed to display 
(PlayShow=1), but you do not include you own play graphic (play.bmp), the 
native Play button is displayed with your graphics. 


Note: All backgrounds and controls created for RealONE 
Player skins must be in bitmap format. When you save the 
graphic files you create for skins, be sure to use Save As... and 
choose the .bmp format before saving the file. To convert files 
saved in other formats to bitmap format, refer to the graphics 
program’s documentation. 


The specific button bitmaps work by having four button states in each 
button.bmp graphic. These states are: disabled, normal, mouseover, and 
working. Make all states for these buttons the same size as the buttons 
themselves. The program divides by 4 to determine where each state graphic 
begins, so if you are off by a pixel, the display is not correct. Typical state 
appearances include: 


+ Grey for disabled 
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+ Raised and clickable for normal 
- Raised and highlighted for mouseover 


- Indented for working. 


Backgrounds 


Backgrounds can be any size and shape, but should be based on a square or a 
rectangle. If you want to make a skin shaped like a pyramid, for example, begin 
with a square background, place a pyramid shape within the square, and 
specify that the areas that are not part of the pyramid should be colored with 
the transparent color (255,0,255), which is magenta. 


- Be sure that transparent areas are exactly (255,0,255) and there are no 
pixel variations that could display as pink, which is (245,0,255). 


Be aware that some programs try to dither automatically to this pink 
color, and you must override it. If you create rounded or diagonal edges, 
do not create a background designed for a desktop of a specific color. 
Minimize dithering on rounded edges as much as possible, but retain 
enough to avoid jagged edges. 


» Use the bucket tool to paint an entire area. 


- Save the background graphic in .bmp format, and name the file 
backgnd.bmp. 


General Dos and Don’ts 


RealNetworks is continuing to expand the capabilities of skins, but there are a 
few guidelines you must follow. 


Dos and Don’ts 
Do Don’t 


Use a horizontal slider for | Use circular knob-style volume 
the volume control. controls. 


Use flat, straight sliders for | Use curved sliders for volume or 


volume or position. position. 
Use Previous and Next Use a button that skips forward or 
buttons that skip to the backward in the current track. 


previous and next track. 
(Table Page 1 of 2) 
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Dos and Don’ts (continued) 


Do Don’t 


Use graphics that change Use animation. 
based on state, such as 


playing or stopped. 
Avoid antialiased text. Use antialiased text. 
Use standard fonts. Use custom fonts. 


(Table Page 2 of 2) 


The skin.ini File 


The skin. ini file is the only file that is required to be present within a .rjs file. 
Each skin. ini file has two sections: [MAIN] and [STATUS]. The [MAIN] section 
must always precede the [STATUS] section. 


At a minimum, the skin.ini file must contain an Application entry and a 
Version entry under [MAIN], as shown in the following example: 
[MAIN] 


Application=RealONE Player 
Version=1.0 


You can change every part of the skin, but any part that you do not specifically 
change remains unaltered. 


You can put comments inside the .rjs file. Be sure to begin each comment with 
a semicolon (;). For example, you might decide to include a comment that 
provides your Web site location or an e-mail contact. 


The [MAIN] Section 


The [MAIN] section of the skin.ini file contains instructions for the display or 
hiding of each control associated with a skin. The following table shows each 
control’s name, whether it is shown in standard Compact Mode, and a 
description of the control. Properties of each standard control are used in 
conjunction with the control’s name. 
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Standard Skin Controls 


Shown by 
Control Name Default Description Name 
Record Yes Record button record.bmp 
Play Yes Play button play.bmp 
Pause Yes Pause button pause.bmp 
Stop Yes Stop button stop.bmp 
Previous Yes Previous Track button previous.bmp 
Next Yes Next Track button next.bmp 
Continue Yes Continuous Play Mode button continue.bmp 
Shuffle Yes Shuffle Play Mode button shuffle.bmp 
Mute Yes Mute button mute.bmp 
Exit Yes Exit button exit.bmp 
Minimize Yes Minimize button minimize.bmp 
Menu Yes Menu button menu.bmp 
FullMode Yes Full mode button fullmode.bmp 
Vol Yes Volume slider voltrack.bmp, volthumb.bmp 
Pos No Track Position slider postrack.bmp, posthumb.bmp 
Eject No Eject button eject.bmp 
RealLogo Yes Real Logo button reallogo.bmp 
CDInfo No Get CD Info button cdinfo.bmp 
PlayStatus Yes Standard Play Status window n/a 
RecordStatus Yes Standard Record Status window | n/a 
RPLaunch No Launch RealONE Player button | rplaunch.bmp 
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Note: RealLogo automatically generates the reallogo. You 
cannot change the logo. You do not have to place areallogo.bmp 
file in your skin in order to have the logo displayed. 


For More Information: To use a RealONE Player logo instead of a 
reallogo, visit http://www.real.com. This custom control 


should be linked to http://jukebox.real.com. 
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Displaying Controls 


To turn on any of the controls listed above, create a line in skin.ini that reads: 
<controlname>Show=1 
Note: Remember that if you want a control to be displayed, but 


you do not include a graphic named for the control, the native 
control is displayed in your skin. 


To show or hide a control: 
PlayShow=1 //shows the Play button 


RecordStatusShow=0 //hides the Record Status window 


Positioning Controls 


Based on the original graphic you created, determine the upper-left coordinate 
of the location where you want the controls to be placed on your background. 
For example, if your background is 100x100 pixels, and you want the Play 
control to be in the upper-left corner of the background, your Play 
coordinates could be something like 20,20 for the upper-left corner of the Play 
button. 


To move buttons and sliders: 

EjectTopLeft=240,43 //repositions the Eject button at x,y = 240,43 
VolTopLeft=40,98 //repositions the Volume slider at x,y = 40,98 
To move a status window: 

Status1Rect=20,180,370,200 //status windows must specify rectangle 


Status windows must be measured with all four coordinates of the rectangle. 
The status paints this rectangular region with the background color you 
choose. 


Showing Controls Intermittently (Optional) 
You can specify a state in which to display a control. 
VolShow=Playing §//shows the Volume slider only when playing 
You can also specify a state for status controls. 
Status1Show=Playing //shows Status 1 only when playing 
Control1Show=NotCDReady //shows Control 1 only when CD not ready 
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Possible states are: 
- Playing 

» NotPlaying 

- Paused 

+ NotPaused 

- Recording 


NotRecording 
- CDReady 
- NotCDReady 


You can specify multiple states, which are interpreted using boolean OR. 


EjectShow=NotPlaying,CDReady //shows Eject button when not playing or 
//when CD is present in drive 


Replacing Standard Control Images 


You can replace any standard control image with a graphic you create. The 
following sections describe how to replace buttons, sliders, and backgrounds, 
as well as how to turn off the default status. 


Buttons 


To replace the image of a standard button, include in the .rjs file a .bmp file 
with the same name as the button you want to replace, for example, 
continue.bmp to replace the standard Continue button. Button bitmaps are 
laid out horizontally with four states: disabled, normal, mouseover and 
working. You must create four versions of each button—one for each state— 
place them side by side, and save them as one bitmap. 


Button bitmap showing four states 


OCOX®) 


Magenta, or RGB (255,0,255), is used throughout the skins architecture for 
transparency. Buttons, slider tracks, slider thumbs, and custom status text 
backgrounds can all be made transparent. You might even try making a status 
field with an opaque background and transparent text. 
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Note: If you have circular buttons and are planning to place 
them close enough together so that they do not have their own 
square-shaped space to move around in, you must place the 
neighbor button’s pixels in the corners. Be sure that these 
pixels are consistent across the states for the neighbor buttons. 


For More Information: See “The [STATUS] Section” on page 44 
for more information on custom status controls. 


Sliders 


Slider controls for volume and position consist of two elements: the track and 
the thumb, which shows position within the track. Therefore, each slider has 
two bitmaps associated with it. The following table shows how these bitmaps 
must be named. 


Names for Slider Control Bitmaps 


File name Description 

PosThumb.bmp Progress thumb that moves as track 
plays. 

PosTrack.bmp Path along which the thumb moves. 
Must be the same height as the thumb. 

VolThumb.bmp Volume thumb that is grabbed to 
change volume. 

VolTrack.bmp Path along which the volume thumb 
moves. Must be the same height as the 
thumb. 


The track bitmap has three images. The first image is the disabled state. The 
second and third are the nonfilled and filled images. When the slider draws 
itself, it uses the filled image for the area to the left of the thumb and the 
nonfilled image for the area to the right of the thumb. 


Track Bitmap for Position Slider Track 
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The thumb bitmap has two images, one for enabled and one for disabled. The 
slider track and thumb bitmaps must be the same height, and the thumb 
must be at least two pixels wide. 


Thumb Image for Position Slider 


wy 


Backgrounds 


If you include a background bitmap to be zipped with your skin, the file 
should be called backgnd.bmp. This file is very important, because the slider 
and button placements are measured in relation to this file. Build this file 
early and use it as a reference. Magenta pixels drop out and the window's 
borders conform to the nontransparent part of the bitmap. 


Turning Off the Default Status 


The PlayStatus and RecordStatus windows are not very customizable. They 
can be shown or hidden, and their rectangular dimensions can be changed. 
However, they do not perform well if made narrower, taller, or shorter. They 
can be widened to show more status, but doing so can cause problems with 
repositioning items within the widened window. 


If you are creating your own custom status, set PlayStatusShow and 
RecordStatusShow both to 0. This setting prevents the native status from 
appearing, so you can have the custom status display to your specifications. 


The [STATUS] Section 


In the [STATUS] section of the skin.ini file, you can specify customizable 
status windows. The following table shows the properties that can be set for a 
status window. 
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Status Window Properties 


Setting Default Effect 

Status 1Type None Specifies data to display (required). 
See “ Custom Status Types.” 

Status 1Rect None Position of status field (required). 
Status fields require X,Y 
coordinates for all four corners of 
the field (for example, 16,47, 140, 
61). 

Status 1TextColor Yellow RGB values (for example, 
“255,121,64” for text color) 

Status 1BackgroundColor | Black RGB values for background color 

Status lJustification Left Justification of text (left, right, or 
center) 

Status 1FontName None Specifies font name for window text 

Status 1FontHeight None Specifies font height for window 
text 

Status 1FontBold None Specifies bold property for window 
text 

Status 1FontItalic None Specifies italic property for window 
text 

Status 1FontUnderline None Specifies underline property for 
window text 

Status 1Show None Specifies whether and when to 
show the status field (for example, 
Status 1Show=Playing). 

Status 1Transparent 0 Specifies whether background is 
transparent (O=no, 1=yes). 


Note: You can specify BackgroundColor=255,0,255 to achieve a 
transparent background for a status field, but this causes 
problems on Windows 98 machines, which may be set to 
display antialiased fonts. On such machines, the status text has 
a magenta fringe around the letters. To avoid this fringe effect, 
set Transparent=1 and specify the BackgroundColor to be the 
color of the image behind the status field. The Status will still 
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be transparent, but its edges will blend with the background 
correctly. 


RealONE Player currently supports up to 20 custom status fields. The 
following table shows the possible types. You can have multiple status fields 
with the same status type. 


Custom Status Types 
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Status Type Displays 

PlayTitle Name of currently playing or queued 
track 

PlayArtist Artist of currently playing or queued 
track 

PlayAlbum Album of currently playing or queued 
track 

PlayGenre Genre of currently playing or queued 
track 

PlayTimeElapsed Elapsed time of currently playing 
track 

PlayTimeRemaining Remaining time of currently playing 
track 

PlayTimeRatio Elapsed time/total track time (for 
example, “0:21/3:20”) 

PlayTimeTotal Total track time 

PlayBitrate Bitrate (for example,“64 Kbps”) 

PlayFormat Media format (for example, 
“RealAudio” or “MP3”) 

RecordName Name of currently recording track 
(blank if not recording) 

RecordArtist Artist of currently recording track 
(blank if not recording) 

RecordAlbum Album of currently recording track 
(blank if not recording) 

RecordGenre Genre of currently recording track 
(blank if not recording) 


(Table Page 1 of 2) 
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Custom Status Types (continued) 


Status Type Displays 

RecordArtistAlbum Artist and album of currently 
recording track (blank if not 
recording) 

RecordPercent Percent complete of currently 
recording track (blank if not 
recording) 

RecordIndex Index of currently recording track (for 
example, “4 of 7”) 

RecordSpeed Current recording speed (blank if not 
recording) 


(Table Page 2 of 2) 
Combined Status 


In addition to these fields, any two of (artist, album, title) can be used with 
either Play or Record, as shown in the following example. 


PlayTitleArtist //shows status of the form “Money--Pink Floyd” 
RecordArtistAlbum //shows status of the form “Beatles--Abbey Road” 


State-Dependent Status Fields 


You can make a status field display only in certain play states, just as you cana 
button. For example: 


Status1Show=Playing //status shows only when playing 


Status1Show=NotPlaying //status shows whenever paused or stopped 


Custom Image and Button Controls (Optional) 


The skin. ini file can specify up to 30 custom image and button controls. To 
specify a custom control, at a minimum, both the image and the top-left 
coordinates must be specified. For example: 


Control1Image=glow.bmp //this image must be in the .rjs file 
Control1TopLeft=100,32 


To create a 4-state button, supply a 4-state bitmap and specify that the control 
is a button, as shown below. 


ControliIsButton=1 


Overlay images and custom buttons also support the following properties: 


47 


48 


RealONE Player RMP Authoring Kit 


ControL1URL=www.stonehenge.com //hurls to specified URL on click 
Control1ChangeSkin=farley_small //\oads the specified skin, if it exists 
Control1ToolTip=SmallMode //shows tool tip on mouseover 


You can also specify an action to be performed when an image or button is 
clicked. Currently, the following actions are possible: ShowPreferences, 
ShowEqualizer, and BrowseML. For example: 


Control1Action=ShowPreferences 


The following table show the properties supported by both standard and 
custom controls. 


Controls Property Support Matrix 


Standard Standard Standard Custom Custom 
Property button slider status button status 
Show Yes Yes Yes Yes Yes 
(State) 
URL No No No Yes No 
ToolTip No No No Yes No 
Action No No No Yes No 
ChangeSki | No No No Yes No 
n 


Standard Buttons 
Record, Play, Pause, Stop, Previous, Next, Continue, Shuffle, Exit, Minimize, 
FullMode, Menu, Eject, RPLaunch, GetCDInfo 


Standard Sliders 
Pos, Vol 


Standard Status 
PlayStatus, RecordStatus 


Custom Buttons 
Control1, Control2, and so on 


Custom Status 
Status1, Status2, and so on 
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Skin Families 


A skin family is two or more skins that are linked together through custom 
buttons that enable a user to switch from one skin to another. For example, 
you can have a deluxe version of a skin, containing all possible status fields, 
with a button on it to switch toa simplified version that contains only the 
Play and Stop buttons. 


Right now, each member of a skin family must be a separate, fully contained 
download, because artwork is not shared among skin family members. 


When you name your skin for downloading, be sure that your naming 
convention conforms to that of the platform where you are posting the skin. 
For example, you might name a skin my_skin.rjs, instead of My.(skin).rjs, which 
would be confusing on a UNIX platform. 


Be sure that the custom control that switches to the new skin family member 
has the final file name, including the extension. A common mistake is to leave 
the ChangeSkin control pointing to a .zip file, when you have changed the 
extension to .rjs for better download. 


Publish the Skin 


You can submit completed skins to RealJukebox Central to be posted for 
millions of RealONE Player users to see and download. Here’s how the review 
process works: 


- Each submitted skin is reviewed, and those that are obscene, vulgar, or 
otherwise deemed inappropriate will not be posted. 


- The remaining skins are rated by a panel of RealNetworks employees 
based on artistic merit and technical merit (that is, how much 
functionality it has). Skins with higher ratings are featured more 
prominently than other skins. 


RealNetworks maintains the right to display or not display any skin that is 
submitted. By submitting your skin, you also authorize RealNetworks to 
display the skin in the GetMusic panel of the RealONE Player. 


For More Information: For specific instructions on submitting 


your skin, visit http://realjukebox.real.com. 
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APPENDIX 


A 


EXAMPLE SKIN: PAGE ME 


Example: The Page Me Skin 


The Page Me skin uses most of the functionality of RealONE Player skins 
within a small interface. This appendix describes the features of the Page Me 
skin, shown below. 


The Page Me Skin 


The .zip file contains 11 bitmaps and a skin. ini file. Seven of the bitmaps (play, 
stop, exit, menu, next, previous, and fullmode) are replacements for the graphics 
on standard buttons. For example, the file play.bmp displays four states 
(disabled, normal, mouseover, and working), as shown below. 


The play.bmp File 


The [MAIN] Section 


Within the skin.ini file for the Page Me skin, the [MAIN] section first lists the 
Show properties of all standard controls. 


Tip: Put the Play and Stop buttons in the same place, and use 
the Show state so the Play button magically turns into a Stop 
button when Play is pressed, and vice versa. To do this, set 
PlayShow=NotPlaying and StopShow=Playing. 


Next, the coordinates for the various standard controls are specified. 
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COMMENT: 
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PlayTopLeft=14,11 
StopTopLeft=14,11 
PreviousTopLeft=94,11 
NextTopLeft=134,11 
MenuTopLeft=180,11 
ExitTopLeft=226,10 
FullModeTopLeft=226,34 


Should ExitTopLeft be 226,11? Original Word doc shows 226,10. 


Then, four custom controls are defined. 


Control 1 

Control 1 is a RealBubble bitmap that shows in the right-hand side of the 
LCD window during playback. For this custom control, three specifications 
are defined. 


Control1Image=bubble.bmp 
Control1TopLeft=187,35 
Control1Show=Playing 
Control1ToolTip=RealNetworks 


Control 2 
Control 2 is a bitmap image that hurls the user to 
http://www.realnetworks.com. 


Control2Image=real.bmp 
Control2TopLeft=17,67 

Control2IsButton=0 
Control2URL=http://www.realnetworks.com 
Control21ToolTip=Visit RealNetworks 


Control 3 

Control 3 is a button that changes the skin to zebra.zip. 
Control3Image=zebrabtn.bmp 

Control3TopLeft=54,11 

Control3ChangeSkin=zebra 

Control3IsButton=1 

Control3ToolTip=Change to Zebra Skin 


Control 4 
Control 4 is a small button that pops up the preferences. Note that it reuses 
the bitmaps for the Exit button. 
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Control4Image=exit.bmp 
Control4TopLeft=189,68 
Control4Action=ShowPreferences 
Control4IsButton=1 


The [STATUS] Section 


In the [STATUS] section of the skin. ini file for the Page Me skin, the first item 
defined in a default font. Custom status windows that do not specify their 
own font default to this font. If no default font is specified, and if a custom 
status window does not define its own font, the font from standard PlayStatus 
and RecordStatus is used. 


DefaultFontName=Lucida Console 
DefaultFontBold=1 
DefaultFontHeight=11 


Next, three status fields are defined for the PlayTitle, PlayTimeElapsed, and 
PlayArtist status types. 


Note: Status1 and Status2 use the default font. 


PlayTitle 
Status1Type=PlayTitle 


Status1Rect=16,47,140,61 
Status1TextColor=72,72,104 
Status1BackgroundColor=26,169,193 


PlayTimeElapsed 
Status2Type=PlayTimeElapsed 


Status2Rect=141,47,180,61 
Status2TextColor=72,72,104 
Status2BackgroundColor=26,169,193 
Status2Justification=center 
Status2State=playing 


PlayArtist 
Status3Type=PlayArtist 


Status3Rect=16,35,175,47 
Status3TextColor=72,72,104 
Status3BackgroundColor=26,169,193 
Status3Justification=center 
Status3FontName=Lucida Console 
Status3FontHeight=10 
Status3FontBold=1 
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APPENDIX 


B 


SAMPLE FILES CATALOG 


This catalog contains images of every file in the Sample Files folder 
that came with your RealONE Player Skins Tool Kit download. 
These files are intended for use with the tutorial in “Chapter 3: 
Creating a Skin: Tutorial” on page 27. Use the instructions in “ 
Choose Graphics” on page 28 to select and use a background and 
control set from the catalogs below. 


When you have chosen the background and controls you want to use and 
copied them into your My Skin folder, follow the instructions under 
“ Determine Control Positions” on page 29. 


Tip: To be included in your skin, all of the graphics you have 
chosen must be included in the final .zip file you create when 
you package the skin. The best way to keep track of these files 
is to place them in your My Skin folder. 


Sample Backgrounds 


The images shown below represent the sample files you downloaded with your 
Skins Tool Kit. You can find them in the Skins Tool Kit folder on your hard 
drive, in the Sample Files folder. Choose the background you want to use from 
the images below, and then copy the corresponding files from the Sample Files 
folder (Skins Tool Kit/Sample Files/Backgrounds) into your My Skin folder. 
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backgnd1.bmp 


backgnd2.bmp 


backgnd3.bmp 


backgnd4.bmp 


APPENDIX B: Sample Files Catalog 


After you have chosen the background and controls you want to use and 
copied them into your My Skin folder, follow the instructions under 
“Determine Control Positions” on page 29. 


Sample Controls 


The images shown below represent the sample files you downloaded with your 
Skins Tool Kit. You can find them in the Skins Tool Kit folder on your hard 
drive, in the Sample Files folder. Each control set has its own folder (Control Set 
1, Control Set 2, and so on). Choose the controls you want to use from the 
images below, then copy the corresponding files from theSample Files folder 
(Skins Tool Kit/Sample Files) into your My Skin folder. You can mix and match 
these controls any way you like. Use the scroll bar on the right side of the Help 
window to see more samples. 


Control Set 1 


play1.bmp 
stop1.bmp 
4aaa 


volthumb1.bmp 


voltrack1.bmp 


Control Set 2 


play2.bmp 
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stop2.bmp 


exit2.bmp 


previous2.bmp 


next2.bmp 


fullmode2.bmp 


menu2.bmp 


Control Set 3 


play3.bmp 
pause3.bmp 

a (a fe 
stop3.bmp 
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record3.bmp 


shuffle3.bmp 


ee Shuffle et Shuffle © 


exit3.bmp 


previous3.bmp 


next3.bmp 


fullmode3.bmp 


menu3.bmp 


minimize3.bmp 


mute3.bmp 
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Control Set 4 


play4.bmp 


pause4.bmp 


stop4.bmp 


shuffle4.bmp 


exit4.bmp 


previous4.bmp 


next4.bmp 


menu4.bmp 


minimize4.bmp 
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posthumb4.bmp 


postrack4.bmp 


volthumb4.bmp 


voltrack4. bmp 


Control Set 5 


playS.bmp 


pause5.bmp 


stop5.bmp 


shuffleS.bmp 
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exitS.bmp 


previous5.bmp 


nextS.bmp 


fullmode5.bmp 


menuS.bmp 


minimize5.bmp 


muteS.bmp 


After you have chosen the background and controls you want to use and 
copied them into your My Skin folder, follow the instructions under 
“Determine Control Positions” on page 29. 
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skin controls, standard (table), 39 
skin creation 
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advanced topics, 37 
choose graphics, 28 
choose background, 28 
choose controls, 28 
create a mock-up, 30 
determine control positions, 29 
determine X,Y coordinates, 31 
getting started, 27 
skin creation tools, 27 
skin creation tutorial, 27 
skin design 
skin.ini file, 39 
skin design considerations, 37 
backgrounds, 38 
buttons, 37 
general dos and don’ts, 38 
skin example 
Page Me, 51 
skin families, 49 
skin.ini file, 25, 39 


Control Show Properties section, 32 


editing, 31 

MAIN section, 39 

positioning controls, 32 

STATUS section, 44 
skin. ini file, 

Control Show Properties section 

conditional settings, 33 

skins toolkit contents, 24 
sliders 

replacing, 43 
SMIL, 11 
SMIL content, sample files, 19 
SMIL file, producing, 19 
standard control images 

how to replace, 42 
standard skin controls, table, 39 
state-dependent status fields, 47 
status 

default 

turning off, 44 

status fields, custom (table), 46 
status fields, state-dependent, 47 
STATUS section 


Page Me skin example, 53 
skin.ini file, 44 
status window properties (table), 44 
status, combined, 47 
steps for creating RMP file 
post RMP file to Web site, 18 
steps for creating RMP files 
create valid .rmp file, 14 
encode music files, 13 
import music into Viper, 14 
support,technical, 6 


Synchronized Multimedia Integration Lan- 


guage (SMIL), 11 


technical support information, 6 
testing the skin, 24, 34 

toolkit components, 12 

tools for skin creation, 27 
transparent color, magenta, 38 
turning off default status, 44 
tutorial on skin creation, 27 


writing metadata for music files, 14 


X,Y coordinates, determining, 31 
XML, basis for RMP files, 7 
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